<template>
  <div class="quest_content" :style="style">
    <!-- 问卷 -->
    <template v-if="type === 1">
      <QuestionnaireContent
        :examList="examList"
        :questionaire="questionaire"
        :contentList="contentList"
        :edit="edit"
        @handleExam="handleExam"
      />
    </template>

    <!-- 表单 -->
    <template v-else-if="type === 2">
      <!-- TODO -->
    </template>
  </div>
</template>

<script lang="ts">
import { ExamItem, Questionaire } from '@/store/design/types';
import QuestionnaireContent from '@/components/design/questionnaire/QuestionnaireContent.vue';
import { defineComponent } from 'vue';
export default defineComponent({
  components: { QuestionnaireContent },
  props: {
    /** 题列表 */
    contentList: { type: Array, default: () => [] },
    /** 问卷信息 */
    questionaire: {
      type: Questionaire,
      default: new Questionaire(),
    } /** 问卷类型 */,
    type: { type: Number, default: 1 },
    /** 题目列表 */
    examList: { type: Array, default: () => [] },
    /** 组件样式传递 */
    style: { type: Object, default: new Object() },
    edit: { type: Boolean, default: true },
  },
  emits: [
    /** 点击某个题目进入编辑状态 */
    'handleExam',
  ],
  setup(props, { emit }) {
    const handleExam = (value: ExamItem) => {
      emit('handleExam', value);
    };

    return { handleExam };
  },
});
</script>
<style lang="less" scoped>
// .quest_content {
//   width: 883px;
//   overflow: hidden;
//   padding: 24px;
//   box-shadow: 0px 0px 4px 0px @shadow-color;
//   background-color: white;
//   min-height: calc(100vh - 64px);
// }
</style>
